<template>
    <div>
        <el-card shadow="never" style="border:none;">
            <div slot="header" class="clearfix">
                <el-row>
                    <el-col :span="13">
                        <span>路径:{{vmPath}}</span>
                    </el-col>
                    <el-col :span="3" style="border:1px solid #fff;">
                       <el-button @click="handleReturn" v-show="vmPath != ''" style="position:relative;left:15px;">	<i class="iconfont icon-fanhui"></i>返回上级</el-button>
                    </el-col>
                    <el-col :span="8">
                        <el-button @click="dialogVisible = true,creatWJJName= ''">
                            <i class="iconfont icon-folder-add"></i>新建文件夹</el-button>
                        <el-button @click="dialogVisible2 = true"><i class="el-icon-upload el-icon--right"></i>文件上传</el-button>
                        <el-button @click="handleRestar">重启</el-button>
                    </el-col>
                </el-row>
            </div>
            <el-table v-loading="loading"  :data="tableData" style="width: 100%">
                <el-table-column prop="fileName" label="文件">
                    <template slot-scope="scope">
                        <div style="cursor:pointer;">
                            <img src="/static/img/file/file.png" alt="" v-if="scope.row.fileType == 1 " @click="handleToChildren(scope.row.fileName)">
                            <img src="/static/img/file/txt.png" alt="" v-else>
                            <span style="position:relative;bottom:10px;">{{scope.row.fileName}}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="size" label="文件大小"></el-table-column>
                <el-table-column prop="date" label="创建时间"></el-table-column>
                <el-table-column label="操作" align="left" width="140">
                    <template slot-scope="scope" >
                        <el-button type="text" icon="el-icon-delete" circle @click="handleDeleteFile(scope.row,scope.$index)"></el-button>
                        <el-button type="text" icon="el-icon-edit" circle @click="handleEdit(scope.row)" v-show="scope.row.fileType == 2 && scope.row.wjType == 2"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!--新建文件 弹出框start -->
        <el-dialog
            title="新建文件夹"
            :visible.sync="dialogVisible"
            width="20%">
            <div style="padding:0 20px;">
              <el-input placeholder="输入文件夹名" v-model="creatWJJName"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleCreateWJJ">创建</el-button>
            </span>
        </el-dialog>
        <!--新建文件 弹出框end -->

        <!--文件上传 弹出框start -->
        <el-dialog
            title="文件上传"
            :visible.sync="dialogVisible2"
            width="25%">
            <div style="padding:0 20px;height:200px;text-align:center;">
                <div style="margin-top:15px;">
                    <el-checkbox  v-model="isUncompress">默认解压</el-checkbox>
                    <el-checkbox v-model="isDelete"  :disabled="checkdisable">删除压缩包源文件</el-checkbox>
                </div>
                <el-radio-group v-model="radio" style="margin-top:20px;margin-left:-50px;">
                    <el-radio :label="1">本地</el-radio>
                    <el-radio :label="2">远程</el-radio>
                </el-radio-group>
                <div v-if="radio == 1">
                    <el-upload
                        class="upload-demo"
                        ref="upload"
                        :action="apiUrls.uploadDeployUrl"
                        :data="uploadURLData"
                        :file-list="fileList"
                        :limit = '1'
                        :on-success="uppzSuccess"
                        :before-upload="uppzBefore"
                        :auto-upload="false"
                        style="margin-top:50px;">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                    </el-upload>
                </div>
                <div v-if="radio == 2">
                    <div style="margin-top:50px;">
                        <el-button slot="trigger" size="small" type="primary" @click="handleChooseFile" v-if="isShow"
                        style="margin-left:-110px;display:inline-block;">选取文件</el-button>
                        <el-button slot="trigger" size="small" type="success" @click="handlesyncFile" v-if="!isShow"
                        style="margin-left:15px;display:inline-block;">确定</el-button>
                        <p style="display:inline-block;">{{ycfileName}}</p>
                    </div>
                </div>
            </div>
        </el-dialog>
        <!--文件上传 弹出框end   -->

        <!-- 读取文件 弹出框start-->
        <el-dialog
            title="文件内容"
            :visible.sync="dialogVisible3"
            width="50%">
            <el-input type="textarea" :rows="15" v-model="fileContent" v-loading="loadingfileContent"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible3 = false">取 消</el-button>
                <el-button type="primary" @click="handleUpDateFile">修改</el-button>
            </span>
        </el-dialog>
        <!-- 读取文件 弹出框end-->

        <upload-dialog 	ref="uploaddialog" @addSucess="addSucess"></upload-dialog>
    </div>
</template>



<script>
    import { createFile,deleteFile,getDeployContent,updateDeployFile} from '@/service/swagger/DeployContentController.js'
    import { getDirFile,syncFile} from '@/service/swagger/ShareController.js'
    import { getFileContent } from '@/service/swagger/FileController.js'
    import {apiUrls} from "@/service/components/common";
    import uploadDialog from "@/view/components/dialog/uploadDialog";

    const RegfileType = function(data){
        return data.forEach(el=>{
            if(el.fileType == 2){
                var reg2 = /([^.]+)$/
                el.type = el.fileName.match(reg2)[1]
                // 可编辑文件
                if(el.type == 'txt' || el.type == 'log' || el.type == 'xml' || el.type == 'conf' ||el.type  == ''){
                         el.wjType = 2
                    }else{
                        el.wjType = 1
                    }
            }
        })
    }
    export default{
        components:{
         uploadDialog
        },
        props:[
          "id"
        ],
        data(){
            return{
               isShow:true,
               radio:1,
               loading:false,
               checkdisable:true,
               loadingfileContent:false,
               ycfileName:'',//远程选择的文件名字
               apiUrls:apiUrls,//上传地址
               tableData:[],//文件列表
               mntPath:'',//目录路径 (上传时候的path)
               vmPath:'',//左上角显示的路径（当前路径）
               creatWJJName:'',//新建文件夹名字
               fileContent:'',//文件内容
               fileList:[],//上传文件
               isUncompress:false,//是否解压
               isDelete:false,//是否删除原目录
               fileObj:{},
               uploadURLData:{
                    path:'',
                    instId:this.id,
                    isUncompress:'0',
                    isDelete:'0',
                    fileType :2
               },//上传文件对象
               cRow:{},
               dialogVisible:false,
               dialogVisible2:false,
               dialogVisible3:false,
               dialogVisible4:false,
            }
        },
        watch:{
           isUncompress(val){
                if(val){
                    this.uploadURLData.isUncompress = '1'
                    this.checkdisable = false  
                }else{
                    this.uploadURLData.isUncompress = '0'
                    this.checkdisable = true
                    this.isDelete = false
                }
            },
            isDelete(val){
                if(val){
                    this.uploadURLData.isDelete = '1'
                }else{
                    this.uploadURLData.isDelete = '0'
                }
            },
            dialogVisible2(val){
               if(val){
                   this.isShow = true
                   this.fileList = []
                   this.radio = 1
                   this.ycfileName = ''
                   this.fileObj = {}
               }
            },
        },
        mounted() {
            
        },
        methods:{
            // 初始化数据
            initData(){
                // 获取发布内容
                getDeployContent({instId:this.id}).then(ret=>{
                    if(ret.code == 0){
                        if(ret.data.files && ret.data.files.length){
                            RegfileType(ret.data.files)
                            this.tableData = ret.data.files
                        }else{
                            this.tableData = []
                        }
                        this.mntPath = ret.data.mntPath
                        this.uploadURLData.path = ret.data.mntPath
                    }
                })
            },
            // 刷新当前目录
           Refresh(){
                let params = {
                    instId:this.id,
                    path:this.vmPath,
                    type:1
                }
                getDeployContent(params).then(ret=>{
                    if(ret&&ret.code == 0){
                        if(ret.data.files && ret.data.files.length){
                            RegfileType(ret.data.files)
                            this.tableData = ret.data.files
                        }else{
                            this.tableData = []
                        }
                        this.mntPath = ret.data.mntPath
                        this.uploadURLData.path = ret.data.mntPath
                    }
                })
                
           },
           //进入文件
           handleToChildren(fileName){
                let filename =  this.vmPath + '/' + fileName
                let params = {
                    instId:this.id,
                    path:filename,
                }
                this.loading = true
                getDeployContent(params).then(ret=>{
                    this.loading = false
                    if(ret.code == 0){
                        if(ret.data.files && ret.data.files.length){
                            RegfileType(ret.data.files)
                            this.tableData = ret.data.files
                        }else{
                            this.tableData = []
                        }
                        this.vmPath = filename
                        this.mntPath = ret.data.mntPath
                        this.uploadURLData.path = ret.data.mntPath
                    }
                })
           },
           //退出文件
           handleReturn(){
                let filename = this.vmPath
                let params = {
                    instId:this.id,
                    path:filename,
                    type:2
                }
                this.loading = true
                getDeployContent(params).then(ret=>{
                    this.loading = false
                    if(ret.code == 0 && ret.data.files){
                        if(ret.data.files && ret.data.files.length){
                            RegfileType(ret.data.files)
                            this.tableData = ret.data.files
                        }else{
                            this.tableData = []
                        }
                        let newPath = this.vmPath.replace(/([/][^/]+)$/,"")
                        this.vmPath = newPath
                        this.mntPath = ret.data.mntPath
                        this.uploadURLData.path = ret.data.mntPath
                    }
                })
           },
           //删除文件或文件夹
           handleDeleteFile(row,index){
                    let h = this.$createElement
                    this.$msgbox({
                        title: '删除实例',
                        message: h(
                        'p',
                        { style: 'padding:0 30px;' },
                        `删除操作无法恢复，请确定是否删除该文件？`
                        ),
                        customClass: 'zt-confirm-msgbox',
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        showCancelButton: true
                    }).then(()=>{
                        let newPath = ''
                        if(this.vmPath == ''){
                            newPath = '/'
                        }else{
                           newPath = this.vmPath
                        }
                        let params = {
                            fileName:row.fileName,
                            fileType:row.fileType,
                            instId:this.id,
                            path:newPath
                        }
                        deleteFile(params).then(ret=>{
                            if(ret&&ret.code == 0){
                                this.$message({showClose: true,message: '删除成功！',type: 'success'})
                                this.Refresh()
                            }else{
                                this.$message({showClose: true,message: '删除失败！',type: 'error'})
                            }
                        })
                    })
           },
           //创建文件夹
           handleCreateWJJ(){
                let params = {
                        fileName:this.creatWJJName,
                        fileType:1,
                        instId:this.id,
                        path:this.mntPath
                    }
                    createFile(params).then(ret=>{
                        if(ret&&ret.code == 0){
                            this.dialogVisible = false
                            this.Refresh()
                            this.$message({showClose: true,message: '创建成功！',type: 'success'})
                        }else{
                            this.dialogVisible = false
                            this.$message({showClose: true,message: '创建失败！',type: 'error'})
                        }
                    })
           },
           //读取文件
           handleEdit(row){
              this.cRow = row
              this.dialogVisible3 = true
              this.fileContent = ''
              let params = {
                        filePath:this.mntPath + "/" + row.fileName
                    }
                this.loadingfileContent = true
                getFileContent(params).then(ret=>{
                    this.loadingfileContent = false
                    if(ret&&ret.code == 0){
                        this.fileContent = ret.data
                    }
                })

           },
           //修改文件
           handleUpDateFile(){
              this.dialogVisible3 = false
              let newPath = ''
               if(this.vmPath == ''){
                   newPath = '/'
                }else{
                   newPath = this.vmPath
                }
                let params = {
                    content:this.fileContent,
                    fileName:this.cRow.fileName,
                    fileType:2,
                    instId:this.id,
                    path:newPath
                }
                updateDeployFile(params).then(ret=>{
                    if(ret&&ret.code === 0){
                        this.$message({showClose: true,message: '编辑成功！',type: 'success'})
                    } else {
                        this.$message({showClose: true,message: '编辑失败！',type: 'error'})
                    }
                })
           },
           //上传文件
           submitUpload() {
                this.$refs.upload.submit();
           },
           //上传文件前
           uppzBefore(file){
                var str = file.name 
                var idx1 = str.lastIndexOf(".")
                var idx2 = str.length
                var suffix = str.substring(idx1 + 1,idx2)
                //如果不是这些文件后缀 选择了解压 删除压缩包 也默认传0
                if(suffix != 'zip' && suffix != 'tar' && suffix != 'jar' && suffix != 'war'){
                    this.isUncompress = false
                    this.isDelete = false
                    this.uploadURLData.isUncompress = '0'
                    this.uploadURLData.isDelete = '0'
                }
           },
           //上传文件成功
           uppzSuccess(ret,file){
                if(ret&&ret.code == 0){
                    this.$message.success('上传成功')
                    this.dialogVisible2 = false
                    this.isUncompress = false
                    this.Refresh()
                }else{
                    this.isUncompress = false
                    this.$message.error('上传失败')
                    this.dialogVisible2 = false
                }
           },
           handleChooseFile(){
              this.$refs.uploaddialog.open()
           },
           addSucess(data){
               this.isShow = false
               this.ycfileName = data.name
               this.fileObj = data
           },
           //同步文件
           handlesyncFile(){
              this.uppzBefore({name:this.fileObj.name})

              syncFile({
                  instId:this.id,
                  currentPath:this.uploadURLData.path,
                  filePath:'file://' + this.fileObj.mntPath,
                  fileName:this.fileObj.name,
                  isUncompress:this.uploadURLData.isUncompress,
                  isDelete:this.uploadURLData.isDelete,
               }).then(ret=>{
                   if(ret&&ret.code == 0){
                      this.dialogVisible2 = false
                      this.Refresh()
                      this.$message.success('上传成功')
                   }else{
                       this.$message.error('上传失败')
                       this.fileObj = {}
                       this.ycfileName = ''
                       this.isShow = true
                   }
               })
           },
           //重启
           handleRestar(){
               this.$emit('handleRestarbtn')
           }
        }
    }
</script>